// 等待DOM加载完成
document.addEventListener('DOMContentLoaded', function() {
    try {
        // 确保Vue 3已经加载
        if (typeof Vue === 'undefined') {
            throw new Error('Vue未正确加载，请检查CDN链接');
        }
        
        console.log('Vue已加载完成，应用即将初始化');
        
        // 导入并初始化主应用
        import('./main.js');
    } catch (error) {
        console.error('加载必要库失败:', error);
        
        // 显示错误信息给用户
        const errorContainer = document.createElement('div');
        errorContainer.className = 'error-container';
        errorContainer.innerHTML = `
            <div class="error-message">
                <h3>应用加载失败</h3>
                <p>无法加载必要的库文件，请检查您的网络连接或刷新页面重试。</p>
                <p>错误详情: ${error.message}</p>
                <button onclick="window.location.reload()">刷新页面</button>
            </div>
        `;
        
        document.body.appendChild(errorContainer);
        
        // 添加错误样式
        const style = document.createElement('style');
        style.textContent = `
            .error-container {
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background-color: rgba(0, 0, 0, 0.5);
                display: flex;
                justify-content: center;
                align-items: center;
                z-index: 9999;
            }
            
            .error-message {
                background-color: white;
                padding: 2rem;
                border-radius: 8px;
                box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
                max-width: 600px;
                width: 90%;
            }
            
            .error-message h3 {
                margin-top: 0;
                color: #e74c3c;
            }
            
            .error-message button {
                background-color: #3498db;
                color: white;
                border: none;
                padding: 0.5rem 1rem;
                border-radius: 4px;
                cursor: pointer;
                font-size: 1rem;
            }
            
            .error-message button:hover {
                background-color: #2980b9;
            }
        `;
        
        document.head.appendChild(style);
    }
});

// 定义全局错误处理器
window.addEventListener('error', function(event) {
    console.error('全局错误:', event.error);
    
    // 显示简单的错误提示
    if (!document.querySelector('.error-toast')) {
        const errorToast = document.createElement('div');
        errorToast.className = 'error-toast';
        errorToast.textContent = '应用发生错误，请刷新页面重试。';
        
        document.body.appendChild(errorToast);
        
        // 添加toast样式
        const style = document.createElement('style');
        style.textContent = `
            .error-toast {
                position: fixed;
                bottom: 20px;
                left: 50%;
                transform: translateX(-50%);
                background-color: #e74c3c;
                color: white;
                padding: 1rem 2rem;
                border-radius: 4px;
                z-index: 10000;
                box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
            }
        `;
        
        document.head.appendChild(style);
        
        // 5秒后移除错误提示
        setTimeout(() => {
            if (errorToast.parentNode) {
                errorToast.parentNode.removeChild(errorToast);
            }
        }, 5000);
    }
});